function createRenderer(options) {

    const {
        createElement,
        setElementText,
        insert
    } = options

    function mountElement(vnode, container) {
        // 创建 DOM 元素
        // const el = document.createElement(vnode.type)
        const el = createElement(vnode.type)
        // 处理子节点，如果子节点是字符串，代表元素具有文本节点
        if (typeof vnode.children === 'string') {
            // 因此只需要设置元素的 textContent 属性即可
            // el.textContent = vnode.children
            setElementText(el, vnode.container)
        }
        // 将元素添加到容器中
        // container.appendChild(el)
        insert(el, container)
    }

    function patch(n1, n2, container) {
        // 在这里编写渲染逻辑
        // n1不存在是挂载
        if (!n1) {
            mountElement(n2, container)
        } else {

        }
    }

    function render(vnode, container) {
        if (vnode) {
            patch(container._vnode, vnode, container)
        } else {
            if (container._vnode) {
                container.innerHTML = ''
            }
        }
        container._vnode = vnode
    }

    return {
        render
    }
}


// 在创建 renderer 时传入配置项
const renderer = createRenderer({
    createElement(tag) {
        console.log(`创建元素 ${tag}`)
        return {
            tag
        }
    },
    setElementText(el, text) {
        console.log(`设置 ${JSON.stringify(el)} 的文本内容：${text}`)
        el.textContent = text
    },
    insert(el, parent, anchor = null) {
        console.log(`将 ${JSON.stringify(el)} 添加到 ${JSON.stringify(parent)} 下`)
        parent.children = el
    }
})

const vnode = {
    type: 'h1',
    children: 'hello'
}
// 使用一个对象模拟挂载点
const container = {
    type: 'root'
}
renderer.render(vnode, container)